<template>
  <van-popup v-model:show="show" round position="bottom" :style="{ height: '70%' }">
    <div class="vant">
      <div class="top">
        <div class="img">
          <img v-for="(item, index) in detailStore.images.goodsNormsList" :src="item.photo" alt :key="item.gnid"
            v-show="(index == num)" />
        </div>
        <div class="right">
          <p>
            ￥
            <span>{{ detailStore.images.goodDetail[0].gprice }}</span>
          </p>
          <p>库存{{ detailStore.images.goodDetail[0].storecount }}件</p>
          <p>已经选：{{  detailStore.images.goodsNormsList[0].norms }}</p>
        </div>
        <van-icon name="close" color="palevioletred" size="30" class="icon" @click="close" />
      </div>
      <p>套装选择</p>
      <div class="tabs">
        <van-button class="all" plain type="primary" v-for="(item, index) in detailStore.images.goodsNormsList"
          :key="item.gnid" :class="index == num ? 'active' : 'p'" @click="changeImg(index, item.gnid)">{{ item.norms
}}</van-button>
      </div>
      <div class="bot">
        <p>购买数量</p>
        <van-stepper v-model="value" />
      </div>
    </div>
    <van-button round block type="primary" native-type="submit" class="button" @click="$emit('go', gnidd,value)">{{ text
      }}</van-button>

  </van-popup>
</template>

<script setup>
import { reactive, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useDetailStore } from '../../stores/detail.js'
import { useCarStore } from "../../stores/car.js";
const carStore = useCarStore();

const detailStore = useDetailStore()
const router = useRouter();
const route = useRoute();

const show = ref(false);
const num = ref(0);
const gnidd = ref(null)
// console.log(detailStore.images,'===')
gnidd.value=detailStore.images.goodsNormsList[0].gnid
const changeImg = (key, gnid) => {
  // console.log(key)
  num.value = key;
  gnidd.value = gnid
  // console.log(num.value)
};

const value = ref(1);



const open = () => {
  show.value = true;
};
const close = () => {
  show.value = false;
};
defineExpose({
  open
});

defineEmits(["go", 'getVal']);

defineProps({
  text: {
    default: "立即购买"
  },
  value: {
    type: Number,
    t: 1
  }
});

</script>

<style scoped>
.vant {
  display: flex;
  flex-direction: column;
  margin: 5.333vw;
}

.vant .top {
  display: flex;
  position: relative;
}

.vant .top .img {
  width: 33.333vw;
  height: 33.333vw;
  border-radius: 4vw;
  margin-right: 4vw;
  overflow: hidden;
  display: flex;
}

.vant .top .right p:nth-child(1) {
  color: palevioletred;
  font-weight: 200;
  margin-top: 5.333vw;
}

.vant .top .right p:nth-child(1) span {
  font-size: 5.333vw;
  font-weight: bold;
}

.vant .top .right p:nth-child(2) {
  color: #ccc;
  font-size: 1.867vw;
  font-weight: 200;
  padding: 2.667vw 0vw;
}

.active {
  color: #2bcddd;
  border-color: #2bcddd;
  background: #eafafc;
}

.vant .top .right p:nth-child(3) {
  font-size: 2.133vw;
  font-weight: normal;
}

.all {
  margin-right: 2.667vw;
  width: 150px;
  font-size: 12px;
}

.vant .tabs {
  display: flex;
}

.vant .tabs .p {
  color: black;
  border-color: #ccc;
}

.vant .icon {
  position: absolute;
  right: 0;
  top: 0;
}

.vant p:nth-child(2) {
  padding: 4vw 0vw;
}

.vant .bot {
  margin-top: 4vw;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  padding: 2.667vw 0vw;
}

.button {
  position: fixed;
  bottom: 2.333vw;
  left: 0;
}
</style>